import { FC, useEffect } from "react";
import Toggle from "../Toggle";
import { PropsWithChildren } from "react";
import DrawerBody from "./DrawerBody";
import useComponentVisible from "../hooks/clickOutside";
interface IndexProps {
  visible: boolean;
  width?: number;
  onClose: (e) => void;
}

const Index: FC<PropsWithChildren<IndexProps>> = ({
  visible,
  children,
  width,
  onClose,
}) => {
  return (
    <Toggle removeOnLeave={false} visible={visible}>
      <DrawerBody onClose={onClose} width={visible ? width : 0}>
        {children}
      </DrawerBody>
    </Toggle>
  );
};

export default Index;
